<html> 
  <head> 
    <title> BigBrother </title>
    <style type="text/css"> 
    #navbar {
         display: block;
         width: 100%;
         border-top: 2px solid green;
         border-bottom: 2px solid green;
         background: white;
         float: left;
       }
       
    #navbar li {
        display: inline;
        float: left;
        width: 20%;
       }
 
    #navbar ol {
         list-style: none;
         padding: 0;
         margin: 0;
       }
 
    #navbar a {
         display: block;
         padding: 10px;
         border: 1px solid green;
         color:green;
       }
 
    .moreinfo{
         display: none;
         top: 15;
         left: 50;
         margin: 5px;
         padding: 5px;
    }
    .moreinfo li{
         position: static;
         margin: 5px;
     }
     h1{
         color: blue;
     } 
    </style> 
  </head> 
  <body> 
    <h1>BigBrother</h1>
    <h2> keep your friends close -- your enemies closer </h2> 
    <p> BigBrother is a user-friendly mobile application that allows you and your friends to share your locations, 
    view any contacts near your area, and navigate towards a individual of interest. When you can't find those you 
    seek, BigBrother can do it for you. Effortlessly turn yourself into a realtime hotspot by sharing your location 
    with friends and family. </p> 
 
  <div id="navbar"> 
    <ol> 
      <li><a>Features</a></li> 
      <li><a>Gallery</a></li> 
      <li><a>Download</a></li> 
      <li><a>Feedback</a></li> 
      <li><a>About</a></li> 
    </ol> 
  </div> 
    
    <div class="moreinfo" id="features">
      <h3>BigBrother's Features</h3>
      <ul> 
        <li>Share your location with friends</li> 
        <li>View friends in your area</li> 
        <li>Navigate to friends</li> 
        <li>Save locations or automaticatically update them</li> 
      </ul> 
    </div> 
    
    <div class="moreinfo" id="gallery"> 
      <h3>Photos of BigBrother</h3>
      <a href="http://tinypic.com?ref=14udu37" target="_blank"><img src="http://i56.tinypic.com/14udu37.png" border="0" alt="Image and video hosting by TinyPic"></a> <a href="http://tinypic.com?ref=73dvs6" target="_blank"><img src="http://i52.tinypic.com/73dvs6.png" border="0" alt="Image and video hosting by TinyPic"></a>
    </div> 
    
    <div class="moreinfo" id="download">
      <h3>BigBrother Downloads</h3>
      <p>BigBrother currently cannot be downloaded from the web. Check back frequently for updates.</p>
    </div> 
    
    <div class="moreinfo" id="feedback">
      <h3>BigBrother Feedback</h3>
      <p>Please submit all feedback for BigBrother <a href="https://spreadsheets.google.com/spreadsheet/viewform?formkey=dEpCQlNIdERBSS1XNUNrYWdjc0pfVXc6MQ">here.</a>
    </div> 
    
    <div class="moreinfo" id="about"> 
      <h3>About the Creators of BigBrother</h3>
      <ul>
        <h4>Nico</h4>
        <li>Born in Buenos Aires, Argentina, and moved to Miami, FL, at age of 9. Likes laying back and enjoying good music -- John Mayer, U2, Eminem, or Claude Debusssy -- whatever, as long as it's good music. Likes all kinds of martial arts(and unconventional activities like archery and shuriken-throwing), but also team sports, such as basketball and water polo. Has an affinity for math/science but appreciates literature,philosophy, and the arts.</li>
        <h4>Kayla</h4>
        <li>Kayla was born in Houston, TX. She lives five miles away from Johnson Space Center, so she's grown up with an incurable obsession with Space. In her free time, Kayla likes to scuba dive and blow up model rockets. Kayla will be pursuing a degree in Computer Science next year at MIT.</li>
      </ul>
   </div>
    
  </body>
  <script>
    var tabs = document.getElementById('navbar').getElementsByTagName('a');
    
    for(var i=0; i<tabs.length; i++){
      tabs[i].addEventListener('click', function(e){
      Click();
      this.style.backgroundColor = 'red';
      console.log(this.text)
      section = document.getElementById((this.text).toLowerCase())
      section.style.display = 'block';
      }, false, this);
    }
    
    function Click(){
      for(var i=0; i<tabs.length; i++){
         tabs[i].style.backgroundColor = 'white';
         section = document.getElementById((tabs[i].text).toLowerCase())
         section.style.display = 'none';
      }
    }
   
  </script>
</html>
